<template>
    <div class="Map" :style="{ right: CStore.RightStatus ? '400px' : '0' }">
        <SimpleMap ref="SimpleMapView" />
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue';
import { GetCommonStore } from '../../store/Common'
import { FormLayer } from '../Layer'
import { SetLayer } from '../ExModel'

const CStore = GetCommonStore();
const SimpleMapView = ref();

onMounted(() => {
    nextTick(() => {
        SetLayer(new FormLayer(SimpleMapView.value.map, { Click: true }))
    })
})

const SetModel = function (Model: any, Callback: any) {
    const position = JSON.parse(JSON.stringify(SimpleMapView.value.map.state.Mouse));
    if (position.latitude != 'N/A' && position.longitude != 'N/A' && position.height != 'N/A') {
        Model.Entity.Point = position;
        Model.Events.SetPosition(Model.Value, position);
        Callback();
    }
}

const SetActive = function (Entity: any) {
    SimpleMapView.value.map.viewer.camera.flyTo({
        destination: Entity._position,
        duration: 2
    });
}

defineExpose({
    SetModel,
    SetActive
})


</script>
<style lang="less" scoped>
.Map {
    height: 100%;
    position: absolute;
    left: 100px;
    right: 400px;
    top: 0;
    transition: right 0.3s;
    // background-color: #000;
}
</style>